<template>
  <div class="front clear">
    <div class="front-left" v-bar>
      <div class="left-container">
        <div
          @click="routeHandle(item)"
          :class="{'hover': item.hover}"
          class="front-nav"
          v-for="item in meunList">
          <i class="iconfont" :class="item.icon" v-if="item.icon"></i>
          <span>{{item.name}}</span>
        </div>
      </div>
    </div>

    <router-view class="front-right"></router-view>

  </div>
</template>
<script>
  import navConfig from '@/router/config.js'
  export default {
    name: 'index',
    data () {
      return {
        meunList: [],
        chooseDefault: 0,
        routePath: this.$route.path.split('/')[1],
        routeName: this.$route.name
      }
    },
    mounted () {
      this.setNav()
    },
    methods: {
      routeHandle (node) {
        this.meunList.forEach(function (el) {
          el.hover = false
        })
        node.hover = true
        this.$router.push({name: node.plugNo})
      },
      // 设置导航栏
      setNav () {
        navConfig.forEach(x => {
          if (x.name === '示例' && process.env.NODE_ENV === 'development') {
            this.meunList.push(x)
          } else {
            this.meunList.push(x)
          }
        })
      }
    },
    beforeRouteUpdate (to, from, next) {
      let fromRoutePath = to.path.split('/')[1]
      this.meunList.forEach(x => {
        x.hover = false
        if (x.plugNo === to.name || x.plugNo === fromRoutePath) {
          x.hover = true
        }
      })
      next()
    }
  }
</script>
<style lang="scss">
  .front-chat{
    position: fixed;
    width: 56px;
    height: 62px;
    bottom: 30px;
    right: 40px;
    cursor: pointer;
    z-index: 3;
    opacity: 0.5;
    .icon-liaotian{
      font-size: 50px;
      color: $color;
    }
    &:hover{
      opacity: 1;
    }
  }
  .front-left{
    height: 100%;
    width: 239px;
    border-right: 1px #e6e6e6 solid;
    position: fixed !important;
    top: 0;
    left:0;
    box-sizing: border-box;
    background: $color-left;
    .left-container{
      .front-nav{
        padding: 16px 0;
        font-size: $font-size-base;
        cursor: pointer;
        border-left: 3px $color-left solid;
        position: relative;
        &:hover{
          border-left: 2px $color solid;
          background: $color-left-bg;
        }
        i{
          margin: 0 10px;
          font-size: $font-size-large;
        }
        span{
          display: inline-block;
          width: 160px;
          @include ellipsis
        }
        .msg-length{
          position: absolute;
          right: 18px;
          top: 18px;
          background: $red;
          padding: 1px 7px;
          border-radius: 8px;
          font-size: $font-size-smallest;
        }
      }
      .hover{
        color: $color;
        border-left: 2px $color solid;
        background: $color-left-bg;
      }
    }
  }
  .front-right{
    margin-left: 240px;
    margin-top: 0;
    &.full {
      margin-left: 55px;
    }
  }
  .front-iframe{
    margin-left: 240px;
    margin-top: 63px;
    width: 100%;
    height: 850px;
  }
</style>
